<template>
	<view class="course">
		<scroll-view scroll-y="true" class="scroll-content">
			
		<navigator :url="'/pages/studyPathDetail/studyPathDetail?id='+item.learningPathId" v-for="item in studyPathList" class="free_curriculum">

			<view class="">{{item.learningPathName}}</view>
			<view class="author">作者：AI生成</view>
			<image :src="item.pic" mode="aspectFill" class="studyPic"></image>
			<!-- <view class="">
				加入课程
			</view> -->
		</navigator>
		</scroll-view>
		<button type="primary" style="width: 100%;position: fixed;bottom: 0rpx;border-radius: 0;"
			@click="courseIntroduce">自定义学习路线</button>

		<!-- 课程简介弹出框 -->
		<uni-popup ref="coursepopup" type="bottom">
			<view class="coursepop">
				<view class="header">
					<view></view>
					<view class="title">
						自定义学习路线
					</view>
					<view class="close" @click="closer">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y="true">
					<view class="content">
					</view>
					<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="custom" placeholder="请输入你想要的学习路线..."
						@iconClick="iconClick"></uni-easyinput>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import apis from '../../api/apis';

	const coursepopup = ref(null)
	// 课程简洁弹出框
	const courseIntroduce = () => {
		coursepopup.value.open()
	}

	// 关闭底部弹出框
	const closer = () => {
		coursepopup.value.close()
	}



	const custom = ref("")
	const iconClick = () => {
		coursepopup.value.close()
		// 跳转到具体的学习路线页面
		uni.showToast({
			title:"正在为您生成自定义学习路线...",
			icon:"none"
		})
		// uni.navigateTo({
		// 	url: ""
		// })
		apis.createStudyPath(custom.value).then((res)=>{
			// 重新加载学习路线列表
			loadStudyPathList()
			console.log("自定义学习路线",res.data)
			// 开始跳转到详情页面
			uni.navigateTo({
				url:'/pages/studyPathDetail/studyPathDetail?id='+res.data
			})
		})
	}

	const studyPathList = ref([])
	// 加载学习路线列表
	const loadStudyPathList = () => {
		// 发送请求
		apis.getStudyPathList().then((res)=>{
			studyPathList.value = res.data
		})

	}

	loadStudyPathList()
</script>

<style lang="scss" scoped>
	
	.author{
		// padding-top: 50rpx;
		position: relative;
		top: 50rpx;
	}
	.studyPic{
		// margin-top: 100rpx;
	}
	.free_curriculum {
		padding: 15rpx 30rpx;
		height: 200rpx;
		border-bottom: 1rpx solid rgba(128, 128, 128, 0.1);
		// border-radius: 10rpx;
		// background-color: ghostwhite;
		// :nth-child(1){
		// 	margin:30rpx 0rpx 0rpx 0rpx;
		
		.scroll-content{
			
		}
	}

	.free_curriculum image {
		width: 40%;
		height: 180rpx;
		float: right;
		// box-shadow: 0rpx 0rpx 5rpx 5rpx #dddddd;
		border-radius: 10rpx;
		position: relative;
		top: -100rpx;
	}

	.free_curriculum view:nth-of-type(1) {
		margin-top: 20rpx;
		font-weight: 700;
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.free_curriculum view:nth-of-type(2),
	.free_curriculum view:nth-of-type(3) {
		color: #808080;
		font-size: 25rpx;
		margin-top: 20rpx;
	}

	.coursepop {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				color: black;
				font-size: 30rpx;
				font-weight: 600;
				// padding-left: 6rpx;
			}

			.close {
				padding: 6rpx;
			}
		}

		

		
	}
</style>